<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no, width=device-width">
    <title>商品展示</title>
<#include "../common/header.ftl"/>
    <script type="text/javascript" src="/js/plugins/jquery.form.js"></script>
    <script type="text/javascript" src="/js/plugins/jquery-validation/jquery.validate.js"></script>
    <script type="text/javascript" src="/js/plugins/jquery.twbsPagination.min.js"></script>

    <script type="text/javascript">
        $(function () {
            //生成sku按钮点击事件
            $(".generate-sku").click(function () {
                var productId = $(".selectElement.active [name='productId']");
                if (productId.size() == 0) {
                    $.messager.popup("请选择一行元素!")
                } else {
                    window.location.href = "/productSku/" + productId.val()
                }
            });

           /* $(".generate-sku").click(function () {
                $(".selectElement.active [name='productId']");
            })

*/
            //进行选择单行数据
            $(".selectElement").click(function () {
                var trs = $(this).parent("tbody").find("tr");
                $.each(trs, function (i, n) {
                    $(n).removeClass("active");
                });
                $(this).addClass("active");
            });

            $("#query").click(function () {
                $("#currentPage").val(1);
                $("#searchForm").submit()
            });

            $("#pagination").twbsPagination({
                totalPages: ${pageResult.totalPage} || 1,
                    visiblePages:5,
                    startPage:${pageResult.currentPage},
            onPageClick:function (event, page) {
                $("#currentPage").val(page);
                $("#searchForm").submit();
            }
        })
            //弹出框,以及产品的更改功能
            $(".productEditBtn").click(function () {
                $("#editForm").clearForm(true);
                $("#menuModal").modal("show");
                var data = $(this).data("json")
                console.log(data);
                $("#menuModal [name=id]").val(data.id);
                $("#menuModal [name=code]").val(data.code);

                $("#menuModal [name=name]").val(data.name);


                $("#menuModal [name='catalog.id'] option[value=" + data.catalogId + "]").prop("selected", true);

                $("#menuModal [name='brand.id'] option[value=" + data.brandId + "]").prop("selected", true);

                $("#menuModal [name=marketPrice]").val(data.marketPrice);
                $("#menuModal [name=basePrice]").val(data.basePrice);

            });
            //更改操作
            $("#saveBtn").click(function () {
                $("#editForm").ajaxSubmit({
                    datatype: "json",
                    success: function (data) {
                        if (data.success) {
                            $("#currentPage").val(1);
                            $("#searchForm").submit();
                        } else {
                            $.messager.popup(data.msg);
                        }
                    }
                })
            })
        })
    </script>
</head>

<body>
<div class="container">
    <<#include "../common/top.ftl"/>
    <div class="row">
        <div class="col-sm-3">
        <#assign currentMenu = "product_list" />
        <#include "../common/menu.ftl" />
        </div>
        <div class="col-sm-9">
            <div class="page-header">
                <center>
                    <h3>商品管理</h3>
                </center>
            </div>
            <div class="row">
                <!-- 提交分页的表单 -->
                <form id="searchForm" class="form-inline" method="post" action="/product/get">
                    <input type="hidden" id="currentPage" name="currentPage" value=""/>
                    搜索:<input type="text" class="form-control" name="keyword" value="${(qo.keyword)!""}" placeholder="关键字">
                    <div class="form-group">
                        <button id="query" type="button" class="btn btn-success"><i class="icon-search"></i>查询</button>
                    </div>
                    <div class="form-group">
                        <a class="btn btn-info generate-sku" href="javascript:;">生成sku</a>
                    </div>
                </form>
            </div>
            <div class="panel panel-default">
                <table class="table table-hover">
                    <thead>
                    <tr>
                        <th>商品编号</th>
                        <th>商品名称</th>
                        <th>分类</th>
                        <th>品牌</th>
                        <th>市场价格</th>
                        <th>基础价格</th>
                    </tr>
                    </thead>
                    <tbody>
                    <#list pageResult.list as vo>
                    <tr class="selectElement">
                        <input type="hidden" name="productId" value="${vo.id}"/>
                        <td>${(vo.code)!''}</td>
                        <td>${(vo.name)!''}</td>
                        <td>${(vo.catalog.name)!''}</td>
                        <td>${(vo.brand.chineseName)!''}</td>
                        <td>${(vo.marketPrice)!''}</td>
                        <td>${(vo.basePrice)!''}</td>
                        <td>
                            <a href="javascript:void(-1);" class="btn btn-danger productEditBtn"
                               data-json='${vo.jsonString!""}'>编辑</a>
                        </td>
                        <td>
                            <a class="btn btn-info" href="/product/checkproduct?productId=${vo.id}">查看商品</a>
                        </td>
                    </tr>
                    </#list>
                    </tbody>
                </table>
                <div style="text-align: center;">
                    <ul id="pagination" class="pagination"></ul>
                </div>
            </div>
        </div>
    </div>
</div>


<div id="menuModal" class="modal" tabindex="-1" role="dialog">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span>
                </button>
                <h4 class="modal-title">编辑/增加</h4>
            </div>
            <div class="modal-body">
                <form id="editForm" class="form-horizontal" method="post" action="/product/productUpdate"
                      style="margin: -3px 118px">
                    <input id="menuId" type="hidden" name="id" value=""/>
                    <div class="form-group">
                        <label class="col-sm-2 control-label">商品编号</label>
                        <div class="col-sm-6">
                            <input type="text" class="form-control" name="code">
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="col-sm-2 control-label">商品名称</label>
                        <div class="col-sm-6">
                            <input type="text" class="form-control" name="name">
                        </div>
                    </div>

                    <div class="form-group">
                        <label class="col-sm-2 control-label">分类</label>
                        <div class="col-sm-6">
                            <select class="form-control " name="catalog.id">
                                <option>请选择</option>
                            <#list catalogs as catalog>
                                <option value="${catalog.id}">${catalog.name}</option>
                            </#list>
                            </select>
                        </div>
                    </div>

                    <div class="form-group">
                        <label class="col-sm-2 control-label">品牌</label>
                        <div class="col-sm-6">
                            <select class="form-control " name="brand.id">
                                <option>请选择</option>
                            <#list brands as brand>
                                <option value="${brand.id}">${brand.chineseName}</option>
                            </#list>
                            </select>
                        </div>
                    </div>

                    <div class="form-group">
                        <label class="col-sm-2 control-label">市场价格</label>
                        <div class="col-sm-6">
                            <input type="text" class="form-control" name="marketPrice">
                        </div>
                    </div>

                    <div class="form-group">
                        <label class="col-sm-2 control-label">基础价格</label>
                        <div class="col-sm-6">
                            <input type="text" class="form-control" name="basePrice">
                        </div>
                    </div>
                </form>
            </div>
            <div class="modal-footer">
                <a href="javascript:void(0);" class="btn btn-danger" id="saveBtn" aria-hidden="true">更改</a>
                <a href="javascript:void(0);" class="btn btn-info" data-dismiss="modal" aria-hidden="true">取消</a>
            </div>
        </div>
    </div>
</div>
</html>